<template>
  <div class="box">
    <van-nav-bar title="专家问诊搜索" left-arrow @click-left="onClickLeft" />
    <!-- 搜索区块 -->
    <div class="search">
      <van-search v-model="value" show-action class="search-input" @click="router.push('/interrogationSearch')">
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <p class="historyTitle">
      <b style="margin-left: 0.1rem;">最近搜索</b>
      <!-- <buttonclass="clearHistoryBtn">清空历史记录</button> -->
      <svg @click="clearHistory"  t="1733188504286" class="icon" viewBox="0 0 1039 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3201" width="200" height="200"><path d="M827.299435 250.696798h-77.137476v-82.922787c0-7.713748-15.427495-21.212806-38.568739-21.212806h-347.118644c-23.141243 0-38.568738 13.499058-38.568738 21.212806v82.922787h-77.137476v-82.922787c0-53.996234 52.067797-98.350282 115.706214-98.350282h347.118644c63.638418 0 115.706215 44.354049 115.706215 98.350282v82.922787z" fill="#4081C3" p-id="3202"></path><path d="M1000.858757 310.478343h-925.649717c-21.212806 0-38.568738-17.355932-38.568739-38.568738s17.355932-38.568738 38.568739-38.568739h925.649717c21.212806 0 38.568738 17.355932 38.568738 38.568739s-17.355932 38.568738-38.568738 38.568738z" fill="#4081C3" p-id="3203"></path><path d="M750.161959 946.862524h-424.256121c-84.851224 0-154.274953-69.423729-154.274953-154.274953v-520.677966c0-21.212806 17.355932-38.568738 38.568738-38.568739h655.66855c21.212806 0 38.568738 17.355932 38.568738 38.568739v520.677966c0 84.851224-69.423729 154.274953-154.274952 154.274953z m-501.393597-636.384181v482.109228c0 42.425612 34.711864 77.137476 77.137476 77.137476h424.256121c42.425612 0 77.137476-34.711864 77.137476-77.137476v-482.109228h-578.531073z" fill="#4081C3" p-id="3204"></path><path d="M441.612053 821.514124c-21.212806 0-38.568738-17.355932-38.568738-38.568738v-376.045198c0-21.212806 17.355932-38.568738 38.568738-38.568738s38.568738 17.355932 38.568738 38.568738v376.045198c0 21.212806-17.355932 38.568738-38.568738 38.568738zM634.455744 821.514124c-21.212806 0-38.568738-17.355932-38.568738-38.568738v-376.045198c0-21.212806 17.355932-38.568738 38.568738-38.568738s38.568738 17.355932 38.568738 38.568738v376.045198c0 21.212806-17.355932 38.568738-38.568738 38.568738z" fill="#DD8911" p-id="3205"></path></svg>
    </p>
    
    <!-- 历史搜索记录展示区域 -->
    <div class="searchHistory" v-if="searchHistory.length > 0">
      <span v-for="(historyItem, historyIndex) in searchHistory" :key="historyIndex" class="searchHistoryItem">
        {{ historyItem }}
      </span>
    </div>

    <!-- 科室 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div @click="btnvanListDiv(item)" class="vanListDiv" v-for="(item, index) in list" :key="index">
        <dl>
          <dt><img v-lazy="item.img" alt=""></dt>
          <dd>
            <b>{{ item.name }}</b>
            <span class="vanListDivSpan">{{ item.state }}</span>
          </dd>
          <dd>
            <p>{{ item.nosocomium }} {{ item.department }}</p>
          </dd>
          <dd>
            <p class="p">接诊率 <b>{{ item.good }}</b>% 好评率 <b>{{ item.Ordertaking }}</b>% 问诊量 <b>{{ item.interrogation }}</b>% </p>
          </dd>
          <dd>
            <b>{{ item.price }}元&emsp;</b>平均回复:&nbsp;<b>{{ item.recover }}</b>小时内
          </dd>
        </dl>
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import { ref, watch } from "vue";
// @ts-ignore
import { useCounterStore } from '../pinia/index.ts';
import { useRouter } from 'vue-router';
// @ts-ignore
import instance from "../axios/index.ts";
const store = useCounterStore();
const router = useRouter();

const onClickLeft = () => history.back();

interface Item {
  administrativeOffice: string;
  img: string;
  name: string;
  state: string;
  nosocomium: string;
  department: string;
  good: string;
  Ordertaking: string;
  interrogation: string;
  price: string;
  recover: string;
}

const value = ref("");
const loading = ref(false);
const finished = ref(true);
let page = ref(1); //当前页
const list = ref<Item[]>([]); //所有数据

// 搜索历史记录相关
const SEARCH_HISTORY_KEY = 'search_history';

// 获取搜索历史记录
const getSearchHistory = (): string[] => {
  const history = localStorage.getItem(SEARCH_HISTORY_KEY);
  return history? JSON.parse(history) : [];
};

// 新增：用于存储搜索历史记录的响应式数据
const searchHistory = ref<string[]>(getSearchHistory());

// 点击搜索
const onClickButton = () => {
  // 先清空之前的搜索结果
  list.value = [];

  // 异步更新数据
  // setTimeout仅做示例，真实场景中一般为ajax请求
  page.value = 1;
  setTimeout(() => {
    // 全部
    instance.post('/api/homeall').then((res: { data: { data: Item[]; }; }) => {
      let shuju = res.data.data;
      shuju.forEach((item) => {
        if (item.name === value.value || item.administrativeOffice === value.value || item.state === value.value || item.nosocomium === value.value || item.department === value.value) {
          list.value.push(item);
        }
      });
    });
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 500) {
      finished.value = true;
    }
  }, 1000);

  // 将当前搜索词添加到搜索历史记录（可根据需求添加去重逻辑等）
  if (value.value &&!searchHistory.value.includes(value.value)) {
    searchHistory.value.push(value.value);
    localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(searchHistory.value));
  }
}

// 删除指定索引的历史搜索记录函数
const deleteSearchHistory = (index: number) => {
  searchHistory.value.splice(index, 1);
  localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(searchHistory.value));
}

// 新增：监听输入框内容变化
// @ts-ignore
watch(value, (newValue) => {
  if (!newValue) {
    // 当输入框为空时，清空搜索出来的数据
    list.value = [];
  }
});

// 点击数据
const btnvanListDiv =(item: Item) => {
  store.data = item;
  router.push('/consultationDetails');
};
const clearHistory = () => {
  searchHistory.value = [];
  localStorage.removeItem(SEARCH_HISTORY_KEY);
}

</script>

<style scoped lang="scss">
.box{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.search {
  width: 100%;
  height: 0.55rem;
  border: 1px solid #fff;
  position: relative;
}

.search-input {
  width: 3.5rem;
  height: 0.35rem;
  background-color:  #f4f6fa;
  margin-top: 0.1rem;
  margin-left: 0.15rem;
  border-radius: 0.5rem;
}

.notice-swipe {
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: 0.7rem;
  top: 0.12rem;
}

.vanListDiv {
  width: 100%;
  height: 1.3rem;
  border-bottom: 1px solid #f4f6fa;

  dt {
    float: left;
  }

  dd {
    padding-left: 0.6rem;
    padding-top: 0.05rem;

 .vanListDivSpan {
      padding-left: 0.1rem;
    }
  }

  img {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    padding-top: 0.15rem;
  }
}

.p {
  color: #9b9898;

  b {
    color: rgb(16, 132, 220);
  }
}

.searchHistory {
  width: 100%;
  // height: 1.5rem;
  margin-top: 0.1rem;
  // display: flex;
  // flex-direction: column;
  // align-items: flex-start;
  // justify-content: flex-start;
  span {
    margin-bottom: 0.1rem;
  }

  button.delete-btn {
    margin-left: 0.1rem;
    background-color: #f4f6fa;
    border: none;
    border-radius: 0.25rem;
    padding: 0.05rem 0.1rem;
    cursor: pointer;
  }
}
.searchHistoryItem{
  padding-left: .1rem;
  padding-right: .1rem;
  padding-top: .05rem;
  padding-bottom: .05rem;
  background: #f2f2f2;
  border-radius: .2rem;
  margin-left: .05rem;
  display: inline-block;
}
.icon {
  width: 0.4rem;
  height: 0.3rem;
  text-align: center;
  color: #9b9898;
  cursor: pointer;
  position: absolute;
  right: 0.1rem;
  border: none;
  top: 1.1rem;
}
.historyTitle{
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
}
.icon1{
  width: 0.2rem;
  height: 0.2rem;
}
</style>